<template>
  <div class="Map-swiper">
    <div class="swiper-container gallery-top">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video
            autoplay="autoplay"
            controls="controls"
            loop="loop"
            muted="true"
          >
            <source src="../../assets/video/车间火情.mp4" type="video/mp4" />
            你的浏览器不支持视频播放
          </video>
        </div>
        <div class="swiper-slide">
          <video
            autoplay="autoplay"
            controls="controls"
            loop="loop"
            muted="true"
          >
            <source src="../../assets/video/车间疏散.mp4" type="video/mp4" />
            你的浏览器不支持视频播放
          </video>
        </div>
        <div class="swiper-slide">
          <video
            autoplay="autoplay"
            controls="controls"
            loop="loop"
            muted="true"
          >
            <source src="../../assets/video/办公楼疏散.mp4" type="video/mp4" />
            你的浏览器不支持视频播放
          </video>
        </div>
      </div>

      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
      <!-- <div class="swiper-pagination"></div> -->
    </div>

    <!-- 下面点击的盒子 -->
    <div class="swiper-container gallery-thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video
            autoplay="autoplay"
            controls="controls"
            loop="loop"
            muted="true"
          >
            <source src="../../assets/video/车间火情.mp4" type="video/mp4" />
            你的浏览器不支持视频播放
          </video>
        </div>
        <div class="swiper-slide">
          <video
            autoplay="autoplay"
            controls="controls"
            loop="loop"
            muted="true"
          >
            <source src="../../assets/video/车间疏散.mp4" type="video/mp4" />
            你的浏览器不支持视频播放
          </video>
        </div>
        <div class="swiper-slide">
          <video
            autoplay="autoplay"
            controls="controls"
            loop="loop"
            muted="true"
          >
            <source src="../../assets/video/办公楼疏散.mp4" type="video/mp4" />
            你的浏览器不支持视频播放
          </video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Swiper from "swiper";
// import "swiper/dist/css/swiper.min.css";
// import "swiper/dist/js/swiper.min.js";

export default {
  mounted() {
    var galleryThumbs = new Swiper(".gallery-thumbs", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var galleryTop = new Swiper(".gallery-top", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: galleryThumbs,
      },
    });
    // var swiper = new Swiper(".swiper-countainer", {
    //   effect: "coverflow",
    //   loop: true,
    //   grabCursor: true,
    //   slidesPerView: 3,
    //   slidelToClickedSlide: true,
    //   coverflowEffect: {
    //     rotate: 50,
    //     stretch: -150,
    //     depth: 300,
    //     modifier: 1,
    //     slideShadows: true,
    //   },
    //   navigation: {
    //     nextEl: ".swiper-button-next",
    //     prevEl: ".swiper-button-prev",
    //   },
    // });
  },
  methods: {},
  created() {},
};
</script>

<style lang="scss" scoped>
.Map-swiper {
  width: 913px;
  height: 513px;
  position: relative;
}

.swiper-container {
  width: 100%;
  height: 200px;
  // margin-left: auto;
  // margin-right: auto;
}
.swiper-slide {
  // background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80%;
  width: 100%;
}

.gallery-top .swiper-wrapper video {
  width: 100%;
  // height: 80%;
}
video::-webkit-media-controls {
  display: none !important;
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  margin-top: -8px;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide video {
  width: 100%;
  height: 171%;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}
</style>
